<template>
  <div class="footer">
    <div class="logo"></div>
    <p class="copyright"></p>
    <ul class="icons">
      <li @click="toExplorerUrl('https://twitter.com/PremiusMarket')"><img src="@/assets/images/footer_icon_1.png"/></li>
      <li @click="toExplorerUrl('https://discord.gg/t76kxes6VA')"><img src="@/assets/images/footer_icon_2.png"/></li>
      <li><img src="@/assets/images/footer_icon_3.png"/></li>
    </ul>
  </div>
</template>

<script>
export default {
	methods: {
	  toExplorerUrl(url) {
		window.open(url);
	  }
    }
}
</script>

<style lang='scss' scoped>
@import "@/styles/base.scss";
.footer {
  display: flex;
  background-color: #292929;
  padding: .1rem 2.86rem;
  align-items: center;
  .logo {
    width: 2rem;
    height: 0.4rem;
    background-image: url("@/assets/images/logo_icon.png");
    margin-right: 1.07rem;
    background-size: cover;
    flex-shrink: 0;
  }
  .copyright {
    width: 100%;
    margin-bottom: 0;
    color: #898989;
    font-size: .18rem;
  }
  .icons {
    flex-shrink: 0;
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    li {
      margin-left: .17rem;
      width: .44rem;
      height: .44rem;
      border-radius: 50%;
      background-color: #202020;
      padding: .08rem;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>